const app = getApp()

Page({
    data: {
        // tabs 标题数组
        title: [
            {
                id: 0,
                title: "Tabs 1",
                active: true
            },
            {
                id: 1,
                title: "Tabs 2",
                active: false
            },
            {
                id: 2,
                title: "Tabs 3",
                active: false
            },
            {
                id: 3,
                title: "Tabs 4",
                active: false
            }
        ],
        // tabs 内容数组，nid 对应标题 id
        value: [
            {
                nid: 0,
                data: "Tabs 一 的内容"
            },
            {
                nid: 1,
                data: "Tabs 二 的内容"
            },
            {
                nid: 2,
                data: "Tabs 三 的内容"
            },
            {
                nid: 3,
                data: "Tabs 四 的内容"
            }
        ],
        // tabs 显示数组
        useValue: []
    },
    onLoad() {
        this.hadleSetData()
    },

    hadleSetData: function (e) {
        if (typeof e == "undefined") {
            // 页面初始化完成，没有点击时使用以下代码，默认获取第一个 tabs 标题的 id 来索引对应内容
            let nid = this.data.title[0].id;
            let value = this.data.value;
            let useValue = [];
            value.forEach(item => {
                if(nid == item.nid) {
                    useValue.push(item);
                }
            });
            this.setData({
                useValue
            })
        } else {
            // 点击 tabs 动态切换对应内容
            let id = e.detail;
            let title = this.data.title;
            let value = this.data.value;
            let useValue = this.data.useValue;

            // 实现动态添加 active 效果
            title.forEach(item => {
                if(id == item.id) {
                    item.active = true
                } else {
                    item.active = false
                }
            });

            // 实现动态添加 useValue 效果
            useValue.splice(0,useValue.length); // 清空 useValue 数组
            value.forEach(item => {
                if(id == item.nid) {
                    useValue.push(item)
                }
            });

            // 动态赋值
            this.setData({
                title,
                useValue
            })
        }
    }
})